<template>
	<view class="index-container PageBg">
		<view class="custom-nav">
			<custom-nav-bar></custom-nav-bar>
		</view>
		<view class="banner-container">
			<swiper :indicator-dots="true" indicator-color="rgba(255,255,255,.5)" circular indicator-active-color="#fff" :autoplay="true" :interval="2000" :duration="1000">
				<swiper-item v-for="item in banner" :key="item._id">
					<view class="swiper-item">
						
						<navigator v-if="item.target=='self'" class="like" :url="`/pages/classifylist/classifylist?${item.url}`">
							<image :src="item.picurl" mode="aspectFill"></image>
						</navigator>
						
						<navigator v-else class="like" :url="`${item.url}`" :app-id="item.appid" :target="item.target">
							<image :src="item.picurl" mode="aspectFill"></image>
						</navigator>
						
						
					</view>
				</swiper-item>
		
			</swiper>
		</view>
		<view class="announce-container">
			<view class="announce-wrap">
				<view class="announce-left" style="display: flex;align-items: center;" >
					<uni-icons color="#29b28f" type="sound-filled" size="20"></uni-icons>
					<text>公告</text>

				</view>
				<view class="announce-center" >
					<swiper	vertical :autoplay="true" :interval="2000" :duration="1000" circular>
						<swiper-item>
							<view @click="goNoticeDetail" class="swiper-item">欢迎来到阿文壁纸!</view>
						</swiper-item>
						<swiper-item>
							<view @click="goNoticeDetail" class="swiper-item">祝各位2025年快乐！</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="announce-right">></view>
			</view>
		</view>
		<view class="item-container">
			<common-title>
				<template #left>
					<view class="left">每日推荐</view>
				</template >
				<template #right>
					<view class="right">
						<uni-icons  type="calendar" size="20"></uni-icons>
						<uni-dateformat :date="Date.now()" format="MM月dd号"></uni-dateformat>
					</view>
				</template>
			</common-title>
			<view class="day-recommand">
				<scroll-view scroll-x>
					<view class="day-recommand_item" @click="goPreview(item._id)" v-for="item in randomWalls" :key="item._id">
						
								<image :src="item.smallPicurl" mode="aspectFill"></image>
					
					
					</view>
				
				</scroll-view>
			</view>
		</view>
	<view class="item-container">
		<common-title>
			<template #left>
				<view class="left">专题精选</view>
			</template >
			<template #right>
				<view class="right-theme">
				<navigator url="/pages/classify/classify" open-type="reLaunch" >More+</navigator>	
				</view>
			</template>
		</common-title>
		<view class="theme-select">
			<theme-item :id="item._id" :time="item.updateTime" :name="item.name" :url="item.picurl" v-for="item in classifyList" :isMore="false" :key="item._id" ></theme-item>
			<theme-item :isMore="true"></theme-item>
		</view>
	</view>
	</view>
</template>

<script lang="ts" setup>
import commonTitle from "../../components/common-title/common-title.vue"
import customNavBarVue from "../../components/custom-nav-bar/custom-nav-bar.vue";
import { apiGetBanner, apiGetClassify, apiGetNotice, apiGetRandomWall } from "../../api/apis";
import { onMounted, ref } from "vue";
import {onShareAppMessage,onShareTimeline} from "@dcloudio/uni-app"
import { IClassify, INotice, IRandomWall, IhomeBanner } from "../../api/type";
import { PreviewListModel } from "../../services/previewModel";
let banner = ref<IhomeBanner[]>([])
let randomWalls = ref<IRandomWall[]>([])
let notices = ref<INotice[]>()
let classifyList = ref<IClassify[]>([])

let previewListModel = PreviewListModel.getInstance();
	getBanner()
	getRandomWall()
	getNotice();
	getClassify();




	onShareAppMessage(e=>{
		return {
			title:'阿文壁纸',
			path:'/pages/index/index'
		}
	})
	
	onShareTimeline(()=>{
		return {
			title:'阿文壁纸',
		
		}
	})

function goPreview(id){
	previewListModel.setPreviewList(randomWalls.value);
	uni.navigateTo({
		url:"/pages/preview/preview?id="+id
	})

}
	function goNoticeDetail  (){
		uni.navigateTo({
			url:"/pages/notice/detail"
		})
	}
	
	async function getBanner(){
	  let res = await apiGetBanner()
	  banner.value = res;
	  
	}
	async function getRandomWall(){
		let res = await apiGetRandomWall()
		randomWalls.value = res;
	
	}
	async function getNotice(){
		let res = await apiGetNotice({select:true})
		notices.value = res;
	}
	
	async function getClassify(){
		let res = await apiGetClassify({select:true})
		classifyList.value = res;
	}
	

</script>

<style lang="scss" scoped>
	.index-container {
		.banner-container{
			padding:  30rpx;
			width: 100%;
			height: 340rpx;
			
			swiper{
				height: 100%;
				.swiper-item{
					border-radius: 5px;
					width: 100%;
					height: 100%;
					overflow: hidden;
					.like{
						width: 100%;
						height: 100%;
					}
					image{
						
						width: 100%;
						height: 100%;
					}
				}
			}
			
		}
		.announce-container{
			margin-bottom: 60rpx;
			padding:0 30rpx;
			width: 100%;
			height: 80rpx;
		
			.announce-wrap{
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				width: 100%;
				height: 100%;
				border-radius: 10px;
				background-color: #f9f9f9;
				.announce-left{
					color:$brand-theme-color;
				}
				.announce-center{
					flex: 1;
					height: 100%;
					swiper{
						height: 100%;
						.swiper-item{
							padding-left: 46rpx;
							width: 100%;
							height: 100%;
							display: flex;
							align-items: center;
							overflow:hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						
					}
				}
			}
		}
		.item-container{
			
			// margin-top: 60rpx;
			padding-bottom: 50rpx;
			width: 100%;
			.left{
				font-size: 22px;
				font-weight: 700;
			}
			.right{
				:deep(){
					.uni-icons{
						color:$brand-theme-color !important;
					}
				}
				color: $brand-theme-color;
			}
			.right-theme{
				color: #777;
			}
			.day-recommand,{
				margin-top: 35rpx;
				padding-left: 30rpx;
				width: 100%;
				// height: 455px;
				scroll-view{
					white-space: nowrap;
					width: 100%;
					height: 100%;
					.day-recommand_item{
						margin-right: 15rpx;
						width: 220rpx;
						height: 430rpx;
						display: inline-block;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.day-recommand_item:last-child{
						margin-right: 30rpx;
					}
				}
			}
			.theme-select{
				margin-top: 35rpx;
				padding-left: 30rpx;
				width: 100%;
				padding-right: 30rpx;
				display: grid;
				gap: 15rpx;
				grid-template-columns: repeat(3,1fr);
			}
		}
	}


</style>
